<template>
  <div class="clcy">
    <Table :tableData="paneB.tableDataA" @blur="handleBlur" />
    <section>
      <span class="title">
        <i class="el-icon-star-on"></i>
        选择产品：
      </span>
      <br />
      <el-checkbox-group
        v-model="paneB.checkedOptions"
        :max="1"
        @change="addTableData"
      >
        <el-checkbox
          v-for="option in paneB.options"
          :label="option"
          :key="option"
        >
          {{ option }}
        </el-checkbox>
      </el-checkbox-group>
    </section>
    <Card
      v-if="paneB.checkedOptions.length"
      :title="paneB.checkedOptions[0]"
      style="margin-top: 10px"
    >
      <section>
        <span class="title" style="margin-top: 0">
          <i class="el-icon-star-on"></i>
          产品资费：
        </span>
        <br />
        <el-checkbox-group v-model="paneB.checkedOptionsA" :max="1">
          <el-checkbox label="68元/月"> 68元/月 </el-checkbox>
          <el-checkbox label="108元/月"> 108元/月 </el-checkbox>
        </el-checkbox-group>
      </section>
      <section>
        <span class="title">
          <i class="el-icon-star-on"></i>
          产品属性：
        </span>
        <br />
        <Table :tableData="paneB.tableDataB" @blur="handleBlurA" />
      </section>
    </Card>
    <section>
      <span class="title">
        <i class="el-icon-star-on"></i>
        其它信息：
      </span>
      <br />
      <Table :tableData="paneB.tableDataE" />
    </section>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
export default {
  components: {
    Card,
    Table
  },
  data() {
    return {
      paneB: {
        checkedOptionsA: [],
        dialogVisible: false,
        dialogVisibleA: false,
        checkedOptions: [],
        options: [
          '长流程云MAS局数据',
          '长流程云MAS短信',
          '长流程云MAS彩信',
          '长流程5G多媒体消息（标准版）'
        ],
        tableDataA: {
          col: [
            {
              prop: 'colA',
              label: '客户名称',
              type: 'Input'
            },
            {
              prop: 'colB',
              label: '客户编码',
              type: 'Input'
            },
            {
              prop: 'colC',
              label: '客户所在地',
              type: 'Input'
            },
            {
              prop: 'colD',
              label: '是否VIP',
              type: 'Input'
            }
          ],
          row: [
            {
              colA: '',
              colB: '',
              colC: '',
              colD: ''
            }
          ]
        },
        tableDataB: {
          col: [
            {
              prop: 'colA',
              label: '用户名称',
              type: 'Input'
            },
            {
              prop: 'colB',
              label: '通话类型',
              type: 'Input'
            },
            {
              prop: 'colC',
              label: '电话号码',
              type: 'Input'
            },
            {
              prop: 'colD',
              label: '接入协议',
              type: 'Input'
            },
            {
              prop: 'colE',
              label: '短信IP',
              type: 'Input'
            },
            {
              prop: 'colF',
              label: '端口速率',
              type: 'Input'
            },
            {
              prop: 'colG',
              label: '是否开通彩信',
              type: 'Input'
            },
            {
              prop: 'colH',
              label: 'EC/SI名称',
              type: 'Input'
            },
            {
              prop: 'colI',
              label: '短信速率',
              type: 'Input'
            },
            {
              prop: 'colJ',
              label: 'MMS基本接入号',
              type: 'Input'
            },
            {
              prop: 'colK',
              label: 'EC/SI上URL',
              type: 'Input'
            },
            {
              prop: 'colL',
              label: 'IP地址',
              type: 'Input'
            },
            {
              prop: 'colM',
              label: '办理时间',
              type: 'Input'
            },
            {
              prop: 'colN',
              label: '办理部门',
              type: 'Input'
            }
          ],
          row: [
            {
              colA: '',
              colB: '',
              colC: '',
              colD: '',
              colE: '',
              colF: '',
              colG: '',
              colH: '',
              colI: '',
              colJ: '',
              colK: '',
              colL: '',
              colM: '',
              colN: ''
            }
          ]
        },
        tableDataE: {
          col: [
            {
              prop: 'colA',
              label: '客户经理名称'
            },
            {
              prop: 'colB',
              label: '客户经理电话'
            }
          ],
          row: []
        },
        tableDataF: {
          col: [
            {
              prop: 'colA',
              label: '业务名称',
              width: '200px'
            },
            {
              prop: 'colB',
              label: '订单编号'
            },
            {
              prop: 'colC',
              label: '使用部门'
            },
            {
              prop: 'colD',
              label: '订单类型'
            },
            {
              prop: 'colE',
              label: '下载合同',
              type: 'Button',
              btnList: [{ label: '下载' }]
            },
            {
              prop: 'colF',
              label: '创建时间'
            }
          ],
          row: [
            {
              colA: '长流程云MAS局数据产品',
              colB: 'B46112302',
              colC: '市场部',
              colD: '业务开通',
              colE: '是 | 否',
              colF: '2020.10.4'
            },
            {
              colA: '长流程云MAS局数据产品',
              colB: 'B53214012',
              colC: '集团客户部',
              colD: '业务开通',
              colE: '是 | 否',
              colF: '2020.10.4'
            },
            {
              colA: '长流程云MAS局数据产品',
              colB: 'B98541001',
              colC: '集团客户部',
              colD: '业务开通',
              colE: '是 | 否',
              colF: '2020.10.4'
            },
            {
              colA: '长流程云MAS局数据产品',
              colB: 'B63201042',
              colC: '集团客户部',
              colD: '业务开通',
              colE: '是 | 否',
              colF: '2020.10.4'
            },
            {
              colA: '长流程云MAS局数据产品',
              colB: 'B41021554',
              colC: '市场部',
              colD: '业务开通',
              colE: '是 | 否',
              colF: '2020.10.4'
            },
            {
              colA: '长流程云MAS局数据产品',
              colB: 'B46112321',
              colC: '市场部',
              colD: '业务开通',
              colE: '是 | 否',
              colF: '2020.10.4'
            },
            {
              colA: '长流程云MAS局数据产品',
              colB: 'B46112322',
              colC: '市场部',
              colD: '业务开通',
              colE: '是 | 否',
              colF: '2020.10.4'
            },
            {
              colA: '长流程云MAS局数据产品',
              colB: 'B46112332',
              colC: '大客户部',
              colD: '业务开通',
              colE: '是 | 否',
              colF: '2020.10.4'
            },
            {
              colA: '长流程云MAS局数据产品',
              colB: 'B46112334',
              colC: '大客户部',
              colD: '业务开通',
              colE: '是 | 否',
              colF: '2020.10.4'
            },
            {
              colA: '长流程云MAS局数据产品',
              colB: 'B46112323',
              colC: '大客户部',
              colD: '业务开通',
              colE: '是 | 否',
              colF: '2020.10.4'
            }
          ]
        }
      }
    }
  },
  methods: {
    handleBlurA() {
      this.paneB.tableDataB.row = [
        {
          colA: 'A3621412',
          colB: '是',
          colC: '1000',
          colD: 'CMPP3.0',
          colE: '127.3.21.14',
          colF: '100',
          colG: '是',
          colH: '总部B',
          colI: '100条每秒',
          colJ: '',
          colK: 'http://112.35.1.155.8087',
          colL: '',
          colM: '2020.10.5',
          colN: '市场部'
        }
      ]
    },
    handleBlur() {
      this.paneB.tableDataA.row = [
        {
          colA: '立升集团',
          colB: 'A3265545632',
          colC: '北京',
          colD: '是'
        }
      ]
      this.paneB.tableDataE.row = [
        {
          colA: '李芳',
          colB: '13565224581'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  display: block;
  margin-top: 30px;
}
</style>
